<template>
  <div>
    <Bread />
    <div
      v-loading="listLoading"
      element-loading-text="资源加载中"
      element-loading-spinner="el-icon-loading"
      class="detail-container"
    >
      <div class="detail-head-title">
        {{ detailInfo.title }}
      </div>
      <div class="item flex-wrap" style="margin-top: 16px">
        <div class="head" style="width: 100%;padding: 20px 32px 10px">
          <span
            style="font-size: 16px;font-family: Source Han Sans CN, Source Han Sans CN-Bold;font-weight: 700;color: #333333;"
          >
            需求情况
          </span>
        </div>
        <div class="right" style="padding: 14px 32px">
          <div class="main">
            <div class="label label-w">所属领域:</div>
            <div class="label-v">
              {{ filedDictName(detailInfo.typeId) }}
            </div>
          </div>

          <div class="main">
            <div class="label label-w">需求类型:</div>
            <div class="label-v">
              {{ techNeedName(detailInfo.fieldId) }}
            </div>
          </div>

          <div class="main">
            <div class="label label-w">有效期限:</div>
            <div class="label-v">
              {{ detailInfo.effectiveTime }}
            </div>
          </div>

          <div class="main">
            <div class="label label-w">企业名称:</div>
            <div class="label-v">
              {{ detailInfo.companyName }}
            </div>
          </div>
        </div>
        <div class="right" style="padding: 10px 32px">
          <div class="head">
            <span class="title"> </span>
          </div>

          <div class="main">
            <div class="label label-w">研发经费:</div>
            <div
              :class="['label-v']"
              :style="[
                expenditure(detailInfo.expenditure)['color']
                  ? { color: '#F92B00', 'font-weight': 400 }
                  : '',
              ]"
            >
              {{ expenditure(detailInfo.expenditure)['text'] }}
            </div>
          </div>

          <div class="main">
            <div class="label label-w">研发周期:</div>
            <div class="label-v">
              {{ detailInfo.cycle }}
            </div>
          </div>

          <div class="main">
            <div class="label label-w">合作方式:</div>
            <div class="label-v">
              {{ cooperationDictName(detailInfo.cooperationMethod) }}
            </div>
          </div>

          <div class="main">
            <div class="label label-w">企业地址:</div>
            <div class="label-v">
              {{ detailInfo.companyAddress }}
            </div>
          </div>
        </div>
        <div class="right-btn">
          <el-button
            :style="{
              backgroundColor: statusColor(detailInfo.status),
              borderColor: statusColor(detailInfo.status),
            }"
            type="primary"
          >
            {{ statusText(detailInfo.status) }}
          </el-button>
          <!-- <div class="right" :style="{ color: statusColor(detailInfo.status) }">
            {{ statusText(detailInfo.status) }}
          </div> -->
        </div>
      </div>

      <div class="main-content">
        <div class="content">
          <div class="content-head">需求描述</div>
          <div v-html="detailInfo.content" class="content"></div>
        </div>

        <div class="aside">
          <h5 class="head">
            相关推荐
            <div class="head-line"></div>
          </h5>
          <ul class="px-4 list-inside">
            <li
              v-for="item in recommendList"
              :key="item.id"
              class="recommend-item flex items-center"
              @click="toDetail(item.id)"
            >
              <!-- <i class="el-icon-caret-right bg-blue-500"> </i> -->
              <!-- <div>
              <el-image
                :src="item.mainImg"
                class="recommend-left"
                fit="cover"
              ></el-image>
            </div> -->
              <p class="font-bold text-md">
                {{ item.name || item.title }}
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTechNeedDetail, getTechNeedReList } from '@/api/techNeed'

import Bread from '@/components/Bread'
export default {
  name: 'techNeedDetail',
  components: {
    Bread,
  },
  computed: {
    expenditure() {
      return (v) => {
        if (!v) {
          return { text: '面议', color: 'text-red-400' }
        }
        return { text: v, color: '' }
      }
    },
    statusColor() {
      return (status) => {
        let res = ''
        switch (status) {
          case 1:
            res = '#959595'
            break
          case 0:
            res = '#f92b00'
            break
          default:
            res = '#f92b00'
            break
        }
        return res
      }
    },
    statusText() {
      return (status) => {
        status = parseInt(status)
        let res = ''
        switch (status) {
          case 1:
            res = '已揭榜'
            break
          case 0:
            res = '未揭榜'
            break
          default:
            res = '未揭榜'
            break
        }
        return res
      }
    },
    techNeedName() {
      return (fileValue) => {
        let findItem = {}
        findItem = this.techNeedDictList.find(
          (item) => parseInt(item.dictValue) === parseInt(fileValue)
        )
        if (findItem) {
          return findItem['dictLabel'] ? findItem['dictLabel'] : '无'
        }
        return '无'
      }
    },
    filedDictName() {
      return (fileValue) => {
        let findItem = {}
        findItem = this.positionList.find(
          (item) => parseInt(item.dictValue) === parseInt(fileValue)
        )
        if (findItem) {
          return findItem['dictLabel'] ? findItem['dictLabel'] : '无'
        }
        return '无'
      }
    },
    cooperationDictName() {
      return (fileValue) => {
        let findItem = {}
        findItem = this.cooperationTypeList.find(
          (item) => parseInt(item.dictValue) === parseInt(fileValue)
        )
        if (findItem) {
          return findItem['dictLabel'] ? findItem['dictLabel'] : '无'
        }
        return '无'
      }
    },
  },
  data() {
    return {
      nowId: '',
      listLoading: false,
      detailInfo: {
        id: 0,
        title: '',
        companyName: '',
        typeId: '',
        developingType: '',
        effectiveTime: '',
        expenditure: '',
        cycle: '',
        cooperationMethod: '',
        companyAddress: '',
        content: '',
      },
      cooperationName: 'requirement_cooperation_mode',
      cooperationTypeList: [],

      techNeedDictName: 'requirement_demand_type',
      techNeedDictList: [],

      positionDictName: 'user_common_field',
      positionList: [],

      recommendList: [],
    }
  },
  watch: {
    $route(v) {
      this.getInfoById(v.params.id)
      this.getRecommendList()
    },
  },
  created() {
    this.getInfoById()
    this.getRecommendList()
    this.initDictList()
  },
  methods: {
    initDictList() {
      this.getDictList(this.techNeedDictName).then((res) => {
        if (res.code == 200) {
          this.techNeedDictList = res.data
        }
      })

      this.getDictList(this.positionDictName).then((res) => {
        if (res.code == 200) {
          this.positionList = res.data
        }
      })

      this.getDictList(this.cooperationName).then((res) => {
        if (res.code == 200) {
          this.cooperationTypeList = res.data
        }
      })
    },
    getInfoById(id) {
      if (!id && id !== 0) {
        id = this.$route.params.id
      }
      this.nowId = id
      this.listLoading = true
      getTechNeedDetail({ id })
        .then((res) => {
          if (res.code == 200) {
            this.detailInfo = res.data
          }
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    toDetail(id) {
      if (id == this.nowId) {
        return
      }
      let toPath = '/techSource/techNeed/techNeedDetail/' + id
      this.$router.replace({ path: toPath })
    },
    // 获取相关推荐
    getRecommendList() {
      getTechNeedReList().then((res) => {
        console.log('res')
        console.log(res)
        if (res.code === 200) {
          let list = res.rows
          this.recommendList = list.slice(0, 5)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.aside {
  min-width: 390px;
  width: 390px;
  max-height: 500px;
  @apply border  border-gray-300;
  li:before {
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    border: 10px solid #1678ff;
    margin-right: 10px;
    border-color: transparent transparent transparent #1678ff;
  }
  .line-1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  .recommend-item {
    @apply py-4 border-b cursor-pointer;

    .recommend-left {
      width: 104px;
      min-width: 104px;
      height: 68px;
    }
  }
}
</style>
